<!--混捏机组件-->

<template>
  <div class="machine">
    <h1>{{ machineName }}</h1>
<!--    <p>{{ motorParameters.status }}</p>-->
    <Data
      label="电机转速"
      :data="motorParameters.speed.value"
      :status="motorParameters.speed.status"
      style="position: absolute; left: 970px; top: 630px"
    />
    <Data
      label="电机电压"
      :data="motorParameters.voltage.value"
      :status="motorParameters.voltage.status"
      style="position: absolute; left: 970px; top: 652px"
    />
    <Data
      label="电机电流"
      :data="motorParameters.current.value"
      :status="motorParameters.current.status"
      style="position: absolute; left: 970px; top: 674px"
    />
    <Status :status="motorParameters.status"
            style="position: absolute; left: 890px; top: 650px"
            @check="checkMotor"
    />
    <Data
      label="搅刀温度"
      :data="mixToolParameters.temperature.value"
      :status="mixToolParameters.temperature.status"
      style="position: absolute; left: 500px; top: 450px"
    />
    <Data
      label="搅刀转速"
      :data="mixToolParameters.speed.value"
      :status="mixToolParameters.speed.status"
      style="position: absolute; left: 500px; top: 472px"
    />
    <Status :status="mixToolParameters.status"
            style="position: absolute; left: 450px; top: 450px"
            @check="checkMixTool"
    />
  </div>
</template>

<script>
import Data from '@/components/Data.vue';
import Status from '@/components/Status.vue';

export default {
  name: 'KneadingMachine',
  components: { Status, Data },
  props: ['machineName', 'motorParameters', 'mixToolParameters'],
  created() {
    // 动态设置页面大小
  },
  data() {
    return {
    };
  },
  methods: {
    checkMixTool() {
      console.log('checkMixTool');
      this.$emit('changeToMixTool');
    },
    checkMotor() {
      console.log('checkMotor');
      this.$emit('changeToMotor');
    },
  },
};
</script>

<style scoped lang="scss">
.machine{
  height: 965px;
  background-color: #101E56;
  background-image: url("../assets/kneading.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1198px 965px;
  color: #FFFFFF;
}

</style>
